<template>
	<view class="">
		<!-- menu菜单 平台数据  新闻资讯 -->
		<view class="news-box">
			<!-- menu菜单 -->
			<menus :types="5" />
			<!-- 新闻资讯 -->
			<newsModule />
		</view>
		<!-- 我的供应链服务 -->
		<view class="module-box demand-box">
			<view class="acea-row row-middle row-between">
				<view class="module-title">我的供应链服务</view>
				<view class="demand-num">{{demandIdx+1 || 0}} / {{needsList.length || 0}}</view>
			</view>
			<view class="demand-swiper">
				<swiper class="swiper-box" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
					@change="needsSwiperChange">
					<swiper-item class="swiper-item" v-for="(item,index) in needsList" :key="index">
						<view class="swiper-item">
							<sypplyService  :list='[item]' :toZx="false"></sypplyService>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 悬赏任务（规则） -->
		<taskBox :tabNavOn="tabNavOn"/>
	
		<!-- 品牌商家 -->
		<view class="module-box brand-merchant">
			<view class="acea-row row-middle row-between">
				<view class="module-title">品牌商家</view>
				<view class="acea-row row-middle btns">
					<view class="btn white-bg">
						品牌入驻
					</view>
					<view class="btn red-bg">
						申请加盟
					</view>
				</view>
			</view>
			<view class="merchant-num">
				全国品牌 <text>{{ totalBrand }}</text> 家
			</view>
			<scroll-view scroll-x="true" style="height:176rpx;white-space: nowrap;margin-top: 28rpx;">
				<view class="" style="display: flex;white-space: nowrap;"
					@click="toPages('/pages/others/brandList/brandList')">
					<view class="merchant" v-for="item in brandList" :key="item.id">
						<image :src="item.logoImage" mode=""></image>
						<view class="text">{{ item.realname }}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!--  推荐-->
		<view class="goods">
			<view class="acea-row row-between goods-top">
				<view class="acea-row row-middle tabs">
					<view :class="['tab',goodsTabOn==index?'tab-on':'']" v-for="(item,index) in goodsTab" :key="index"
						@click="goodsTabOn=index;getSupplyList()">{{item}}</view>
				</view>
				<view class="shop-btn">
					金币商城
				</view>
			</view>
			<view class="acea-row row-between goods-list">
				<view class="item" v-for="(item,index) in nearbyList" :key="index" @click="toDetail(item.id)">
					<view class="img">
						<image :src="item.images" mode=""></image>
					</view>
					<view class="info">
						<view class="title">
							{{ "供应链" }} 丨{{ item.commodityName}}
							{{ item.title }}
						</view>
						<view class="acea-row type-list">
							<view class="type" v-for="keyword in item.keyword" :key="keyword">
								{{ item.serviceCharacteristics }}
							</view>
						</view>
						<!-- <view class="acea-row merit-list">
							<view class="merit">
								商业街店铺
							</view>
							<view class="merit">
								商业街店铺
							</view>
						</view> -->
						<view class="acea-row row-middle row-between price-info">
							<view class="price">
								<text>{{ item.commodityPrice }}</text>元
							</view>
							<view class="wants">
								<!-- 2人想要 -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSupplyApi,
		getOnSupplyListApi,
		getBrandApi,
		getSuppleOnList,
		getRecommendList,
		getNewList
	} from "@/api/api.js";
	import {
		SecondhandAdd,
		getSupplyLatestApi
	} from '@/api/supplyChain.js'
	import {
		getclassificationListApi
	} from '@/api/brand/index.js'

	import swiperDot from "../swiperDots/swiperDots.vue"
	import newsModule from '../newsModule.vue'
	import menus from '../menu.vue';
	import taskBox from '../taskBox.vue'
	import sypplyService from '@/components/listItems/sypplyService.vue'


	export default {
		components: {
			swiperDot,
			newsModule,
			menus,
			taskBox,
			sypplyService
		},
		props: {
					tabNavOn: {
						type: Number,
						default: 0
					}
				},
		data() {
			return {
				current: 0,
				circular: true,
				autoplay: false,
				interval: 3000,
				duration: 500,
				// 浏览信息头像数组
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				demandIdx: 0, //我的需求当前下标
				demandLength: 4, //我的所有需求
				needsList: [1, 2, 3, 4],
				brandList: [],
				menus: [],
				menusBar: [
					[],
					[]
				],
				totalBrand: 0,
				goodsTabOn: 0,
				goodsList: [],
				goodsTab: ['推荐', '附近', '最新'],
				limit: 8,
				page: 1,
				nearbyList: [],
				nearPage: 1,
				loading: true,
				loadTitle: '我也是有底线的',
				
			}
		},
		created() {
			this.getNearbyList()
		},
		watch: {
			goodsTabOn(newVal) {
				console.log(newVal)
				this.nearPage = 1;
				this.getNearbyList();
			}
		},
		mounted() {
			this.getOnSupplyList()
			this.getBrandList();
			this.getSupplyList()
			this.getclassification();
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/details/supplyChain/supplyChain?id=' + id
				})
			},
			//获取品牌
			async getBrandList() {
				try {
					let res = await getBrandApi({
						limit: 10,
						page: 1
					});
					this.brandList = res.data.list;
					this.totalBrand = res.data.total
				} catch (e) {
					//TODO handle the exception
				}
			},
			needsSwiperChange(e) {
				// console.log(e)
				this.demandIdx = e.detail.current;
			},
			menuSwiperChange(e) {
				this.current = e.detail.current;
			},
			//获取我的供应链列表
			async getOnSupplyList() {
				try {
					let {
						data
					} = await getSuppleOnList({
						limit: 20
					});

					this.needsList = data.list ? data.list.map(item => {
							item.imaegs = item.imaegs ? item.imaegs : this.$noImageShow;
							item.vistype = 4;
							return item;
						}) : [];
					console.log('我的供应链服务', this.needsList)
				} catch (e) {}
			},
			// //供应链列表
			 async getSupplyList() {
			// 	try {
			// 		let {
			// 			data
			// 		} = this.goodsTabOn == 1 ? await SecondhandAdd({
			// 			limit: 2,
			// 			...this.$location
			// 		}) : await getSupplyLatestApi({
			// 			limit: 2
			// 		})
			// 		this.goodsList = data.list.map(item => {
			// 			item.keyword = item.keyword.split(',')
			// 			return item
			// 		})
			// 	} catch (e) {
			// 		//TODO handle the exception
			// 	}
			 },
			//获取供应链
			async getclassification() {
				try {
					let res = await getclassificationListApi();
					res.data.forEach((item, index) => {
						if (index < 8) {
							this.menusBar[0].push(item);
						} else {
							this.menusBar[1].push(item)
						}

					})
				} catch (e) {
					console.log(e)
				} finally {

				}
			},
			async getNearbyList() {
				let parmas = {
					limit: 8,
					page: this.nearPage,
					city: this.$city
				}
				if (this.goodsTabOn == 1) {
					parmas = {
						...parmas,
						...this.$location
					}
				}
				if (this.nearPage == 1) {
					this.nearbyList = []
				}

				try {
					let {
						data
					} = this.goodsTabOn == 2 ? await getNewList(parmas) : await getRecommendList(parmas);
					let d = [...this.nearbyList, ...data.list];
					this.nearbyList = d.filter(item => item.id != this.curId && item.id != this.id)
					console.log('jigweidu=', data)
					this.totalNearPage = data.totalPage;
					this.loading = true;
					if (this.nearPage == data.totalPage && this.nearbyList.length > 0) this.loadTitle = '我也是有底线的'
					else if (this.nearPage < data.totalPage && this.nearbyList.length > 0) this.loadTitle = '加载更多'
					else this.loadTitle = '暂无数据'
				} catch (e) {
					//TODO handle the exception
				}
			},

		},
		onReachBottom() {
			this.nearPage++;
			this.getNearbyList()
		}
	}
</script>

<style lang="scss">
	// menus 新闻资讯
	// //设置轮播的指示点大小
	// .uni-swiper-wrapper {
	//     /deep/ .uni-swiper-dots { // 指示点整个区域
	//         // bottom: 100rpx;
	//     }
	//     /deep/ .uni-swiper-dot { // 指示点元素默认样式
	//         width: 10upx !important;
	//         height: 10upx !important;
	//         // border: 1rpx solid #E0B079;
	//     }
	//     /deep/ .uni-swiper-dot-active { // 指示点元素激活（当前选中）状态样式
	//         // background: #CD9763;
	//     }
	// }
	// 各个模块样式
	.module-box {
		background: #ffffff;
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 26rpx 26rpx;
		padding: 36rpx;

		.module-title {
			padding-left: 18rpx;
			position: relative;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);

			&::after {
				display: block;
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -15rpx;
				width: 6rpx;
				height: 30rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 34, 46, 1);

			}
		}
	}

	.btns {
		.white-bg {
			width: 154rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			opacity: 1;
			border-radius: 32rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			background: #ffffff;
			font-size: 24rpx;
			color: rgba(238, 33, 45, 1);
			margin-right: 16rpx;
		}

		.red-bg {
			width: 154rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			opacity: 1;
			border-radius: 32rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			font-size: 24rpx;
			color: #ffffff;
		}
	}

	.news-box {
		width: calc(100% - 52rpx);
		margin: 164rpx 26rpx 28rpx;
		background: #ffffff;
		opacity: 1;
		border-radius: 10rpx;
		padding: 36rpx;

		.menus {
			margin-bottom: 36rpx;
			// .menus-siper{
			// 	// 列数
			// 	column-count: 4;
			// 	// 间隔
			// 	column-gap: 18rpx;
			// }

			.menus-item {
				width: 25%;
				font-size: 24rpx;
				color: rgba(51, 51, 51, 1);
				text-align: center;

				view {
					padding: 20rpx 0;
				}

				image {
					display: block;
					margin: 0 auto;
					width: 80rpx;
					height: 80rpx;
				}
			}

			// .menuss-item~.menus-item{
			// 	margin-left: 30rpx;
			// }
		}
	}

	// 平台数据
	.platform-datas {
		margin-bottom: 36rpx;

		// display: grid;
		/*  声明列的宽度  */
		// grid-template-columns: repeat(3, 30%);
		.platform-item {
			width: 33%;
			text-align: center;
			// width: 160rpx;
			margin-bottom: 24rpx;

			.datas {
				font-size: 44rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
			}

			.name {
				width: 180rpx;
				font-size: 22rpx;
				color: rgba(128, 128, 128, 1);
			}

			.datas-doc {
				padding-right: 22rpx;
				position: relative;
				display: inline-block;

				&::after {
					display: block;
					content: '＋';
					position: absolute;
					color: rgba(239, 42, 54, 1);
					font-size: 22rpx;
					top: 0;
					right: 0;
				}
			}
		}
	}

	.news-data {
		border-top: 1px solid rgba(247, 247, 247, 1);

		image {
			width: 84rpx;
			height: 84rpx;
		}

		.news-list {
			width: calc(100% - 126rpx);
			height: 84rpx;

			.news-swiper,
			.news-swiper-item,
			.swiper-item {
				height: 100%;
			}

			.news-item {
				padding-left: 16rpx;
				position: relative;

				&::after {
					display: block;
					content: '';
					position: absolute;
					width: 4rpx;
					height: 4rpx;
					background: #000000;
					border-radius: 50%;
					top: 50%;
					transform: translateY(-4rpx);
					left: 0;
				}

				.news-cont {
					width: 80%;
					font-size: 28rpx;
					color: rgba(56, 56, 56, 1);
				}

				.news-time {
					font-size: 22rpx;
					color: rgba(166, 166, 166, 1);
				}
			}

			.news-item~.news-item {
				margin-top: 10rpx;
			}
		}
	}

	// 我的需求
	.demand-box {
		.demand-num {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(212, 212, 229, 1);
		}

		.demand-swiper {
			width: 100%;
			min-height: 250rpx;

			.swiper-box,
			.swiper-item {
				width: 100%;
				height: 265rpx;
			}

			// 需求图片及信息
			.demand-info {
				margin-top: 30rpx;
				position: relative;

				.demand-info-tip {
					position: absolute;
					left: 0px;
					top: 0px;
					width: 66rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 0rpx 10rpx 0rpx 10rpx;
					background: rgba(67, 207, 124, 1);
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;

				}

				image {
					display: block;
					margin: 0;
					width: 236rpx;
					height: 210rpx;
					border-radius: 10rpx;
				}

				.demand-info-l {
					width: calc(100% - 236rpx - 20rpx);
					height: 210rpx;

					.info-tit {
						width: 100%;
						margin-bottom: 8rpx;
					}

					.info-money {
						width: 100%;
						margin-bottom: 8rpx;

						.sale-num {
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(128, 128, 128, 1);
							margin-right: 6rpx;
						}

						.rent-box {
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(238, 33, 45, 1);

							text {
								font-size: 36rpx;
								font-weight: 700;
								color: rgba(238, 33, 45, 1);
							}
						}

						.transfer-box {
							margin-left: 18rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(56, 56, 56, 1);

							text {
								font-weight: 700;
							}
						}
					}

					.advantage-box {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);

						.advantage {
							// width: 104px;
							padding: 0 12rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 4px;
							background: rgba(255, 232, 234, 1);
							letter-spacing: 0.4rpx;
							margin-left: 14rpx;
							margin-bottom: 10rpx;
							white-space: nowrap;
						}
					}
				}
			}

			// 适合场所

			.suitable-box {
				margin-top: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(82, 104, 139, 1);
				padding-bottom: 30rpx;
				border-bottom: 1px solid rgba(238, 238, 238, 1);

				.suitable {
					display: inline-block;
					letter-spacing: 0.4rpx;
					padding: 10rpx;
					border-radius: 4rpx;
					background: rgba(248, 249, 253, 1);
					margin-left: 12rpx;
					white-space: nowrap;
				}
			}

			// 浏览咨询统计
			.visit-box {
				margin-top: 30rpx;
				padding: 30rpx 0;
				border-top: 1px solid rgba(238, 238, 238, 1);

				.visit-advtar {
					width: 40%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}

				.visit-l {
					width: 60%;
					height: 46rpx;

					.visit-num {
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(166, 166, 166, 1);
					}
				}

			}

			// 匹配信息
			.matching-box {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				height: 56px;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}


	// 悬赏任务
	.task-box {
		.task-more-btn {
			margin: 24rpx auto;
			width: 222rpx;
			height: 52rpx;
			opacity: 1;
			border-radius: 30rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			font-size: 26rpx;
			font-weight: 400;
			line-height: 52rpx;
			color: rgba(238, 33, 45, 1);
			text-align: center;
		}

		.task-top-btn {
			width: 154rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			border-radius: 30rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
		}

		.task-list {
			.task-item {
				padding: 16rpx 22rpx;
				height: 218rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 2rpx 4rpx 8rpx 10rpx rgba(0, 0, 0, 0.03);
				margin-top: 28rpx;

				.item-top {
					.task-tit {
						width: 65%;
					}

					.task-tit-l {
						// width: 30%;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(166, 166, 166, 1);
						text-align: center;

						.task-top-btn {
							width: 132rpx;
							height: 42rpx;
							margin: 0 auto 6rpx;
							line-height: 42rpx;
							text-align: center;
							border-radius: 50rpx;
							background: rgba(238, 33, 45, 1);
							border: 1px solid rgba(235, 36, 61, 1);
							color: #ffffff;
						}
					}
				}

				.item-bottom {
					.share-list {
						width: 75%;

						.share-item {
							/** 文本1 */
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(166, 166, 166, 1);
							margin-top: 12rpx;

							text {
								/** 文本2 */
								font-size: 24rpx;
								font-weight: 400;
								color: rgba(212, 48, 48, 1);
							}
						}
					}

					.item-bottom-btn {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);

					}
				}
			}
		}
	}

	// 品牌商家
	.brand-merchant {

		.merchant-num {

			/** 文本4 */
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);

			text {
				/** 文本3 */
				font-size: 36rpx;
				font-weight: 700;
				color: rgba(247, 5, 5, 1);
			}
		}

		.merchant {
			width: 162rpx;
			margin-right: 28rpx;

			image {
				width: 162rpx;
				height: 124rpx;
				opacity: 1;
				border-radius: 10rpx;
			}

			.text {
				width: 162rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
				margin-top: 18rpx;
				text-align: center;
			}
		}
	}

	// 推荐物品
	.goods {
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 26rpx 26rpx;
		padding: 36rpx 0;

		.goods-top {
			.tabs {
				.tab {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
					margin-right: 24rpx;
				}

				.tab-on {
					font-weight: 700;
					color: rgba(0, 0, 0, 1);
				}
			}

			.shop-btn {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				padding: 4rpx 24rpx;
				border-radius: 30rpx;
				border: 1px solid rgba(238, 33, 45, 1);
			}
		}

		.goods-list {
			padding: 30rpx 0;

			.item {
				width: 48%;
				border-radius: 20rpx;
				background: rgba(255, 255, 255, 1);

				.img {
					width: 100%;
					height: 288rpx;
					border-radius: 20rpx 20rpx 0 0;
					background: #ff0000;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx 20rpx 0 0;
					}
				}

				.info {
					padding: 18rpx;

					.title {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: rgba(0, 0, 0, 1);
					}

					.type-list {
						padding: 12rpx 0;
					}

					.type {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
						padding: 0 12rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						border-radius: 4rpx;
						background: rgba(255, 232, 234, 1);
						letter-spacing: 0.4rpx;
						margin-left: 14rpx;
						margin-bottom: 10rpx;
						white-space: nowrap;
					}

					.merit-list {
						padding: 0 0 12rpx;

						.merit {
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(82, 104, 139, 1);
							padding: 0 6rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 4rpx;
							background: rgba(248, 249, 253, 1);
							letter-spacing: 0.4rpx;
							margin-left: 14rpx;
							margin-bottom: 10rpx;
							white-space: nowrap;
						}
					}

					.price-info {
						.price {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(238, 33, 45, 1);

							text {
								font-size: 36rpx;
								font-weight: 700;
							}
						}

						.wants {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(166, 166, 166, 1);
						}
					}
				}
			}
		}
	}
</style>